<template>
	<view class="px-2">
		<view class="uni-uploader" v-if="show">
			<view class="uni-uploader-head">
				<view class="uni-uploader-title">点击可预览选好的图片</view>
				<view class="uni-uploader-info">{{imageList.length}}/9</view>
			</view>
			<view class="uni-uploader-body">
				<view class="uni-uploader__files">
					<block v-for="(image,index) in imageList" :key="index">
						<view class="uni-uploader__file position-relative">
							<image class="uni-uploader__img rounded" :src="image" :data-src="image" @tap="previewImage"></image>
							<view class="position-absolute top-0 right-0 bg-dark px-1" @click.stop="deleteImage(index)">
								<text class="iconfont iconlajitong"></text>
							</view>
						</view>
					</block>
					<view class="uni-uploader__input-box rounded">
						<view class="uni-uploader__input" @tap="chooseImage"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import permision from "@/common/permission.js";
	var sourceType = [
		["camera"],
		["album"],
		["camera", "album"]
	];
	var sizeType = [
		["compressed"],
		["original"],
		["compressed", "original"]
	];
	export default {
		// props:['imageList'],
		props:{
			imageList:Array,
			show:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				title: "choose/previewImage",
				imageList: [],
				sourceTypeIndex: 2,
				sourceType: ["拍照", "相册", "拍照或相册"],
				sizeTypeIndex: 2,
				sizeType: ["压缩", "原图", "压缩或原图"],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
			};
		},
		onReady() {
			this.imageList=this.imageList;
		 
		},
		onUnload() {
			(this.imageList = []),
			(this.sourceTypeIndex = 2),
			(this.sourceType = ["拍照", "相册", "拍照或相册"]),
			(this.sizeTypeIndex = 2),
			(this.sizeType = ["压缩", "原图", "压缩或原图"]),
			(this.countIndex = 8);
		},
	
		methods: {
			// 删除图片
			deleteImage(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片？",
					showCancel: true,
					cancelText: '不删除',
					confirmText: "删除",
					success: (res) => {
						if (res.confirm) {
							this.imageList.splice(index, 1)
							// 删除之后通知add-input把删除后的新的图片传输过去
							this.$emit('change', this.imageList)
						}
					}
				})
// 6.17  ll  44g    tc  68  ew1020g搬家   20 10g   套餐15g    升级 25g 

			},
			chooseImage: async function() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif

				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ?
						9 - this.imageList.length :
						this.count[this.countIndex],
					success: (res) => {
						// 把选择的图片保存在数组中
						this.imageList = this.imageList.concat(res.tempFilePaths);
						// 把选中的图片数组传输到父页面add-input.vue
						this.$emit("change", this.imageList);
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err["code"] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting["scope.camera"];
										break;
									case 1:
										authStatus = res.authSetting["scope.album"];
										break;
									case 2:
										authStatus =
											res.authSetting["scope.album"] &&
											res.authSetting["scope.camera"];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: "授权失败",
										content: "Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限",
										success: (res) => {
											if (res.confirm) {
												uni.openSetting();
											}
										},
									});
								}
							},
						});
						// #endif
					},
				});
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false);
							}
						},
						fail: () => {
							res(false);
						},
					});
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList,
				});
			},
			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS ?
					await permision.requestIOS(sourceType[type][0]) :
					await permision.requestAndroid(
						type === 0 ?
						"android.permission.CAMERA" :
						"android.permission.READ_EXTERNAL_STORAGE"
					);

				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						},
					});
				}

				return status;
			},
		},
	};
</script>

<style>
	.cell-pd {
		padding: 22rpx 30rpx;
	}

	.list-pd {
		margin-top: 50rpx;
	}
</style>
